<template>
    <div class="UserMonthTotalChart-container">
        <div id="main-user" style="width: 100%;height: 300px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: 'MonthUserTotalChart',
        props: ['userData', 'parentUserName'],
        watch: {
            userData(newVal, oldVal) {
                const arr = []
                for(let key of Object.keys(newVal)) {
                    arr.push(newVal[key])
                }
                this.datas = arr
                this.generatorCharts('main-user')
            }
        },
        data() {
            return {
                datas: []
            }
        },
        methods: {
            generatorCharts(id) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(id));
                myChart.setOption({
                    title: {
                        text: this.parentUserName+' 每月金额汇总',
                        fontSize: 100,
                        left: '10',
                        textStyle: {
                            align: 'center',
                            width: '100%'
                        }
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'赔偿金额',
                            type:'bar',
                            barWidth: '60%',
                            data: this.datas
                        }
                    ]
                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.generatorCharts('main-user')
            })

        }

    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>